<template>
  <div class="root-container">
    <el-container class="login-container">
      <el-container class="main">
        <el-header class="header">
          <el-image
            class="logo"
            :src="require('@/images/login/宇喜logo.png')"
            fit="contain"
          ></el-image>
          <p class="tit">打造企业智能制造 公共产业服务平台</p>
          <span class="dsc">欢迎你！</span>
        </el-header>
        <el-form class="form" :rules="rules">
          <el-form-item prop="email">
            <el-input
              placeholder="请输入您的邮箱"
              @focus="inputfocus(1)"
              v-model="ruleForm.email"
              :class="isinput === 1 ? 'inputactive' : ''"
            >
              <template slot="prefix">邮箱</template>
            </el-input></el-form-item
          >
          <el-form-item prop="psd">
            <el-input
              placeholder="请输入您的密码"
              @focus="inputfocus(2)"
              v-model="ruleForm.psd"
              :class="isinput === 2 ? 'inputactive' : ''"
            >
              <template slot="prefix">密码</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="psd">
            <el-input
              placeholder="请输入您的密码"
              @focus="inputfocus(3)"
              v-model="ruleForm.tpsd"
              :class="isinput === 3 ? 'inputactive' : ''"
            >
              <template slot="prefix">确认密码</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox class="radio"
              >我已阅读并同意
              <span class="dsc">《宇喜科技协议》</span></el-checkbox
            >
          </el-form-item>
          <el-form-item>
            <el-button class="registerBtn">注册</el-button>
          </el-form-item>
        </el-form>
        <el-footer class="footer">
          <p class="msg">使用第三方注册</p>
          <div class="pics">
            <el-image
              class="item"
              :src="require('@/images/login/weixin.png')"
              fit="fit"
            ></el-image>
            <el-image
              class="item"
              :src="require('@/images/login/bilibili.png')"
              fit="fit"
            ></el-image>
            <el-image
              class="item"
              :src="require('@/images/login/toutiao.png')"
              fit="fit"
            ></el-image>
            <el-image
              class="item"
              :src="require('@/images/login/douyin.png')"
              fit="fit"
            ></el-image>
          </div>
        </el-footer>
      </el-container>
      <div class="banner">
        <el-image
          :src="require('@/images/login/banner.png')"
          fit="contain"
        ></el-image>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
      isinput: null,
      // 表单变量
      ruleForm: {
        email: '',
        psd: '',
        tpsd: ''
      },
      // 表单验证
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        psd: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    inputfocus(num) {
      this.isinput = num
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less" scoped>
// 输入框激活样式
/deep/ .inputactive {
  position: relative;
  .el-input__inner {
    color: #da251d;
  }
  ::placeholder {
    opacity: 0;
  }
  & ::after {
    position: absolute;
    top: 0;
    left: -16px;
    content: '';
    display: block;
    width: 2px;
    height: 56px;
    background: #da251d;
  }
}
.root-container {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  .login-container {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 640px;
    width: 1100px;
    .main {
      background-color: #fff;
      height: auto;
      width: auto;
      padding: 0 40px;
      //   顶部
      /deep/ .header {
        height: unset !important;
        width: 100%;
        padding-top: 60px;
        text-align: left;
        .logo {
          width: 120px;
          height: 61px;
          margin-bottom: 12px;
        }
        .tit {
          margin: unset;
          font-size: 24px;
          font-family: SourceHanSansSC;
          font-weight: 700;
          color: #333333;
          line-height: 48px;
        }
        .dsc {
          font-size: 16px;
          font-family: SourceHanSansSC;
          font-weight: 400;
          color: #333333;
          line-height: 48px;
        }
      }
      //   表单
      /deep/ .form {
        text-align: left;
        width: 100%;
        // 输入框
        .el-form-item {
          margin: unset;
        }
        & .el-form-item:nth-of-type(2) {
          margin: 10px 0;
        }
        .el-input--prefix .el-input__inner {
          padding-left: 16px;
        }
        .el-input__inner {
          width: 420px;
          padding: unset;
          padding-top: 20px;
          height: 56px;
          background: #ffffff;
          border: 1px solid #dddddd;
        }
        ::placeholder {
          font-size: 14px;
          font-family: SourceHanSansSC;
          font-weight: 400;
          color: #666666;
          line-height: 48px;
        }
        .el-input__prefix {
          left: 17px;
          top: 0px;
          font-size: 14px;
          font-family: SourceHanSansSC;
          font-weight: 400;
          color: #999999;
        }
        .radio {
          .el-checkbox__label {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
          }
          .dsc {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #da251d;
          }
        }
        .registerBtn {
          margin-top: 15px;
          width: 144px;
          height: 48px;
          background: #da251d;
          span {
            font-size: 18px;
            font-family: SourceHanSansSC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
      //   更多方式
      .footer {
        text-align: left;
        .msg {
          margin: unset;
          font-size: 16px;
          font-family: SourceHanSansSC;
          font-weight: 400;
          color: #666666 !important;
          line-height: 40px;
        }
        .pics {
          display: flex;
          .item {
            margin-right: 10px;
            width: 40px;
            height: 40px;
          }
        }
      }
    }
    // 右侧背景图
    .banner {
      width: 600px !important;
      height: 640px;
    }
  }
}
</style>
